<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2023-01-15 18:03:24
 * @LastEditors: 47
 * @LastEditTime: 2023-02-18 15:22:12
-->
<template>
  <div class="add-comment">

    <!-- 添加评论 -->
    <!-- <div class="bottom-comment">
        <van-icon class="add" name="add-o" @click="popupBox1"/>
        <van-field v-model="value"  placeholder="回复" @click="popupBox1"/>
        <span class="like">
            <van-icon class="like-icon" name="good-job-o" />
            <span class="like-num">220</span>
        </span>
    </div> -->

    <div class="bottom-comment" v-if="props.noticeId">
        <van-icon class="add" name="add-o" @click="popupBox1"/>
        <van-field v-model="inputValue"  placeholder="评论"   @click="popupBox1"/>
        <span class="like" @click="updateLike(noticeMsg.like_status)">
            <van-icon :class="{'like-icon':noticeMsg.like_status == 1 ,'unlike-icon': noticeMsg.like_status == 0 }" name="good-job-o" />
            <span :class="{'like-num':noticeMsg.like_status == 1 ,'unlike-num': noticeMsg.like_status == 0 }" v-if="noticeMsg.like_status != 0">{{noticeMsg.notice_like_count}}</span>
        </span>
    </div>

    <div class="bottom-comment" v-if="props.discussId">
        <van-icon class="add" name="add-o" @click="popupBox1"/>
        <van-field v-model="inputValue"  placeholder="评论"   @click="popupBox1"/>
        <span class="like" @click="updateLike(discussMsg.like_status)">
            <van-icon :class="{'like-icon':discussMsg.like_status == 1 ,'unlike-icon': discussMsg.like_status == 0 }" name="good-job-o" />
            <span :class="{'like-num':discussMsg.like_status == 1 ,'unlike-num': discussMsg.like_status == 0 }" v-if="discussMsg.like_status != 0">{{discussMsg.discuss_like_count}}</span>
        </span>
    </div>



    <!-- 弹出层 -->
    <van-popup
      v-model:show="show"
      position="bottom"
      :style="{ height: '40%' }"
    >

    <!-- 顶部输入框、表情、完成按钮 -->
    <div class="top-input">
        <van-icon class="add" name="add-o" @click="popupBox2"/>
        <van-field v-model="inputValue"  placeholder="回复"/>
        <span class="iconfont icon-xiaolian emoji-icon" @click="showEmoji"></span>

        <button 
        :class="{'have-btn':!inputValue || !fileList.length || !imgList.length ,'nohave-btn':inputValue || fileList.length || imgList.length}" 
        :disabled="!inputValue && !fileList.length && !imgList.length"
        @click="toAddComment"
        >
          完 成
        </button>
    </div>


    <div class="big-box">

      <!-- 默认展示区域 功能图标-->
      <div class="show-box1" v-if="showBox1">

        <!-- 第一排图标 -->
        <div class="card-box1">

          <div class="discuss-box" v-for="(card1,index) in functionCard1" :key="index" @click="first(card1.functionName)">
            <div class="discuss-img">
              <span class="iconfont img-font" :class="card1.functionClass"></span>
            </div>
            <span class="custom-title">{{ card1.functionName}}</span>
          </div>

        </div>

        <!-- 第二排图标 -->
        <div class="card-box2">

          <div class="discuss-box" v-for="(card2,index) in functionCard2" :key="index" @click="second(card2.functionName)">
            <div class="discuss-img">
              <span class="iconfont img-font" :class="card2.functionClass"></span>
            </div>
            <span class="custom-title">{{ card2.functionName}}</span>
          </div>

        </div>

      </div>

      <!-- 上传图片 -->
      <div class="show-box2" v-if="showBox2">

        <!-- 关闭按钮 -->
        <div class="cross-close" @click="closeImg">
          <van-icon name="cross" />
        </div>
        
        <div class="container">
          <van-uploader :after-read="imgAfterRead" v-model="imgList" :max-count="3" preview-size="100" accept="image/*" />
        </div>

        <div class="num">
          {{imgList.length}}/3
        </div>

        <div class="label">
          请选择图片
        </div>

      </div>
     
      <!-- 语音输入 -->
      <div class="show-box3" v-if="showBox3">

        <!-- 关闭按钮 -->
        <div class="cross-close" @click="closeSay">
          <van-icon name="cross" />
        </div>
        
        <div class="Voice-input">
          <VoiceInput @sayTransform="say"/>
        </div>

      </div>

      <!-- 表情 -->
      <div class="show-box4" v-if="showBox4" disabled>

        <Emoji @showEmoji="saveEmoji"/>
        
      </div>

       <!-- 上传文件 -->
      <div class="show-box5" v-if="showBox5">

        <!-- 关闭按钮 -->
        <div class="cross-close" @click="closeFile">
          <van-icon name="cross" />
        </div>

        <div class="container">
          <van-uploader :after-read="fileAfterRead" v-model="fileList" :max-count="3" preview-size="100" accept=".doc,.docx,.pdf"/>
        </div>

        <div class="num">
          {{fileList.length}}/3
        </div>

        <div class="label">
          请选择文件
        </div>
      </div>

    </div>

    </van-popup>

  </div>
 
</template>

<script setup>
// 引入dayjs
import dayjs from 'dayjs'
import { ref,onMounted, reactive,inject} from 'vue';

// 导入 course 仓库
import {useCourseStore} from '@/stores/course'
import { storeToRefs } from 'pinia';

// 引入路由
import {useRouter,useRoute} from 'vue-router'

const props = defineProps(['discussId','noticeId'])

// console.log(props.noticeId);

// 创建路由对象
const router = useRouter()
const route = useRoute()

// 实例化仓库对象
const course = useCourseStore()


// 解构 数据
const {noticeMsg,commentList,discussMsg,disList,uploadUrl} = storeToRefs(course)

// 解构 方法
const {getNoticeDetail,toLike,upload,addComment} = course

onMounted(() => {
  // 获取通知详情页信息以及对应的评论区
  getNoticeDetail(props.noticeId,1)
})

const reload = inject('reload')

//点赞
const updateLike = async (likeStatus) => {
    await toLike({
        id:props.noticeId ? props.noticeId : props.discussId,
        userId:1,
        likeStatus,
        judgeCode:props.noticeId ? 1 : 2
    })
    reload()
    //discussId和noticeId   userId
}


// value
let inputValue = ref('')

// 控制弹出层是否展示
const show = ref(false);

// 点击显示弹出层
const popupBox1 = () => {
  show.value = true
}

// 点击隐藏弹出层
const popupBox2 = () => {
  show.value = false

  // 隐藏弹出层的同时，一秒后让弹出层展示 默认功能图标
  setTimeout(() => {
    showBox1.value = true
    showBox2.value = false
    showBox3.value = false
    showBox4.value = false
    showBox5.value = false
  },1000)
}

// 第一排数据
const functionCard1 = [
  {
    functionClass:'icon-xiangce',
    functionName:'相册'
  },
   {
    functionClass:'icon-mic-on-full',
    functionName:'语音输入'
  }, {
    functionClass:'icon-wenjian',
    functionName:'文件'
  }, {
    functionClass:'icon-icon',
    functionName:'笔记'
  }
]

// 第二排数据
const functionCard2 = [
 
  {
    functionClass:'icon-chengyuan',
    functionName:'小组'
  }, {
    functionClass:'icon-ditu-dibiao',
    functionName:'位置'
  }, {
    functionClass:'icon-lianjie',
    functionName:'网页链接'
  },{
    functionClass:'icon-xiangji',
    functionName:'拍摄'
  },
]

// 第一排管理的函数
const first = (name) => {
  if(name == "相册"){
    showPhoto()
  }

  if(name == "语音输入"){
    showSay()
  }

  if(name == "文件"){
    showFile()
  }

  if(name == "笔记"){
    goNote()
  }
 
}

// 默认功能图标展示或隐藏
let showBox1 = ref(true)

// 上传图片功能展示或隐藏
let showBox2 = ref(false)

// 语音输入功能展示或隐藏
let showBox3 = ref(false)

// 表情展示或隐藏
let showBox4 = ref(false)

// 上传文件展示或隐藏
let showBox5 = ref(false)

// 点击上传图片图标
const showPhoto = () => {
  showBox1.value = false

  showBox2.value = true
}

// 点击语音图标
const showSay = () => {
  showBox1.value = false

  showBox3.value = true
}

// 点击文件图标
const showFile = () => {
  showBox1.value = false

  showBox5.value = true
}

// 点击笔记图标
const goNote = () => {
  router.push('/Note')
}

// 绑定已经上传的图片列表
const imgList = ref([]);

// 绑定已经上传的文件列表
const fileList = ref([]);

// 服务器请求回来的图片列表
const NewImgList = reactive([]);

// 服务器请求回来的图片列表
const NewFileList = reactive([]);

// 图片上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。
const imgAfterRead = async(file) => {
  // console.log(file.file);
  // 此时可以自行将文件上传至服务器
  let data = new FormData();
  data.append('file', file.file);
  await upload(data)

  // 将服务器中的图片添加到新数组中
  if(NewImgList.length < 3){
    NewImgList.push(uploadUrl.value)
  }

};

// 文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。
const fileAfterRead = async(file) => {
  // console.log(file.file);
  // 此时可以自行将文件上传至服务器
  let data = new FormData();
  data.append('file', file.file);
  await upload(data)

  // 将服务器中的文件添加到新数组中
  if(NewFileList.length < 3){
    NewFileList.push(uploadUrl.value)
  }

};

// 上传图片页面的关闭按钮
const closeImg = () => {
  showBox1.value = true
  showBox2.value = false
}

// 语音输入的关闭按钮
const closeSay = () => {
  showBox1.value = true
  showBox3.value = false
}

// 语音输入的关闭按钮
const closeFile = () => {
  showBox1.value = true
  showBox5.value = false
}

// 自定义事件 | 语音输入转换为文字
const say = (sayValue) => {
  inputValue.value += sayValue
}

// 点击 表情图标 展示或者隐藏
const showEmoji = () => {
  if(showBox2.value == true || (showBox5.value == true) || (showBox3.value == true)){
    showBox4.value = false
  }else{
    showBox1.value = !showBox1.value
    showBox4.value = !showBox4.value
  }
    
}

// 自定义事件 | 点击表情展示到输入框里
const saveEmoji = (emojiValue) => {
  inputValue.value += emojiValue
}

// 第二排管理的函数
const second = (name) => {
  if(name == "位置"){
    goMap()
  }
  if(name == "小组"){
    goDirectory()
  }
  
}

// 点击定位图标
const goMap = () => {

  // 如果discussId存在
  if(props.discussId){
    router.push({
      name:"mapcontainer",
      params:{
        discussId:props.discussId,
      }
    })
  }

  // 如果noticeId存在
  if(props.noticeId){
    router.push({
      name:"mapcontainer",
      params:{
        noticeId:props.noticeId
      }
    })
  }

}

// 点击小组图标
const goDirectory = () => {
  router.push('/Directory')
}


let submitHtml = ref('')

// 点击提交按钮 将数据添加到数据库
const toAddComment = async() => {
  // <div></div><img src=""><a href=""></a>

  //如果有文字
  if(inputValue.value){
    submitHtml.value+=`<div>${inputValue.value}</div>`
  }
  //如果有图片
  if(NewImgList.length){
    NewImgList.forEach(item => {
      submitHtml.value+=`<img src="${item}" style="width:130px;margin-left:5px">`
    })
  }

  //如果有文件
  if(NewFileList.length){
    NewFileList.forEach(item => {
      submitHtml.value+=`<br><a href="${item}">${item}</a>`
    })
  }

  //发请求

  const commentObj={
    id:props.noticeId || props.discussId,
    //code是区别通知的评论还是讨论的评论
    code:props.noticeId ? 1 : 2,
    userId:1,
    //type是区别是普通字符串评论还是地图
    commentType:1,
    commentTime:dayjs(new Date()).format('YYYY-MM-DD HH:mm') ,
    commentContent:submitHtml.value ,
  }

  await addComment(commentObj)

  //隐藏弹出层 
  popupBox2()

  reload()



  // console.log(commentObj);
  

  // console.log(submitHtml.value);

}
</script>

<style lang="less" scoped>
.add-comment{
  html{
    // background-color: #f4f4f4;
  }
  .bottom-comment{
      position: fixed;
      bottom: 0;
      display: flex;
      flex-flow: row nowrap;
      width: 100%;
      height: 40px;
      background-color:#f7f7f7;
      .van-field{
          height: 28px;
          margin: 7px 10px;
          padding: 4px;
      }
      .add{
          font-size: 31px;
          margin: 4px 10px;
          color: #979797;
      }
      .like{
          display: flex;
          flex-flow: row;
          margin-top: 3px;
          .like-icon{
              font-size: 28px;
              color: #5bb0d9;
              margin-top: 5px;
          }
          .unlike-icon{
              font-size: 28px;
              color: #979797;
              margin-top: 5px;
          }
          .like-num{
              font-size: 12px;
              color: #5bb0d9;
              margin-right: 3px;
          }
          .unlike-num{
              font-size: 12px;
              color: #979797;
              margin-right: 3px;
          }
          
      }
  }
  // .bottom-comment{
  //     position: fixed;
  //     bottom: 0;
  //     display: flex;
  //     flex-flow: row nowrap;
  //     width: 100%;
  //     height: 40px;
  //     background-color:#f7f7f7;
  //     .van-field{
  //         height: 28px;
  //         margin: 7px 10px;
  //         padding: 4px;
  //     }
  //     .add{
  //         font-size: 31px;
  //         margin: 5px 0 5px 10px;
  //         color: #979797;
  //     }
  //     .like{
  //         display: flex;
  //         flex-flow: row;
  //         margin-top: 3px;
  //         .like-icon{
  //             font-size: 28px;
  //             color: #5bb0d9;
  //             margin-top: 5px;
  //         }
  //         .like-num{
  //             font-size: 12px;
  //             color: #5bb0d9;
  //             margin-right: 3px;
  //         }
          
  //     }
  // }

  .top-input{
      display: flex;
      flex-flow: row nowrap;
      width: 100%;
      height: 40px;
      background-color:#f9f9f9;
      .van-field{
          height: 28px;
          margin: 7px 10px;
          padding: 4px;
      }
      .add{
          font-size: 31px;
          margin: 5px 0 5px 10px;
          color: #979797;
      }

      .emoji-icon{
        font-size: 30px;
        color: #848388;
        padding: 0 15px 0 5px;
      }

      .nohave-btn,
      .have-btn{
        margin: 8px 5px;
        height: 20px;
        width: 70px;
        border-radius: 5px;
      }

      .have-btn{
        color: #848388;
        border: 1px solid #b3b3b3;
      }

      .nohave-btn{
        border: 1px solid transparent;
        background-color: #0199fe;
        color: #f6f9fb;
      }
      
  }

  .big-box{
    // width: 375px;
    // height: 226px;

    .show-box1{

      .card-box1,
      .card-box2{
          overflow: hidden;
          display: flex;
          flex-flow: row wrap;
          justify-content: space-around;
          background-color: #f4f4f4;
          padding: 21px;
          .discuss-box{
            width: 50px;
            display: flex;
            flex-flow:column wrap;
            justify-content: space-between;

            .discuss-img{
              width: 50px;
              height: 50px;
              border-radius: 7px;
              background-color: #ffffff;

              .img-font{
                margin-left: 10px;
                line-height: 50px;
                font-size: 30px;
                color: #6f7277;
              }
            }
            
            .custom-title{
              margin: 8px 0;
              text-align: center;
            }
          }
          
          .van-cell__right-icon{
            margin-top: 15px;
        }
      }

      .card-box2{
        padding: 0 20px 20px 20px;
      }
    }
   
    .show-box2{
      display: flex;
      flex-flow: column wrap;

      .cross-close{
        padding: 8px 10px 0 0;
        text-align: right;
      }
     .container{
      margin: 22px 0 20px 30px;
     }

     .num{
      margin-bottom: 10px;
      text-align: center;
      color: #c9c9c9;
      font-size: 13px;

     }

     .label{
      text-align: center;
      color: #c9c9c9;
      font-size: 14px;
     }
    }

    .show-box3{
      .cross-close{
        padding: 8px 10px 0 0;
        text-align: right;
      }
    }

    .show-box5{
      display: flex;
      flex-flow: column wrap;

      .cross-close{
        padding: 8px 10px 0 0;
        text-align: right;
      }
     .container{
      margin: 22px 0 20px 30px;
     }

     .num{
      margin-bottom: 10px;
      text-align: center;
      color: #c9c9c9;
      font-size: 13px;

     }

     .label{
      text-align: center;
      color: #c9c9c9;
      font-size: 14px;
     }
    }
  }
}

</style>
